<!DOCTYPE html>
<html>
  <head>
    <title>test easeout animation</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width,user-scalable=no">
    <style>
      .x{position:absolute;top:50px;left:0;width:50px;height:50px;background:#f00;}
      .y{top:150px;}
    </style>
  </head>
  <body>
    <div id="xx" class="x">&nbsp;</div>
    <div id="yy" class="x y">&nbsp;</div>
    <script src="../../../../src/define.js"></script>
    <script>
      NEJ.define([
          'base/element',
          'util/animation/easeout'
      ],function(_e,_x){
          
          var xx = _x._$$AnimEaseOut._$allocate({
              from:{offset:0},
              to:{offset:1},
              duration:500,
              onupdate:function(_event){
                  _e._$setStyle(
                      'xx','left',
                      _event.offset*600+'px'
                  );
              },
              onstop:function(_event){
                  this._$recycle();
              }
          });
          xx._$play();
          
          var count = 0;
          function a(){
              _e._$setStyle(
                  'yy','left',
                  (count++)+'px'
              );
              window.requestAnimationFrame(a);
          }
          window.requestAnimationFrame(a);
      });
    </script>
  </body>
</html>